<template>
  <div
    class="tkbox cjresult_tkbox qrcodebox clmcenter"
    @click.self="$emit('close')"
  >
    <div class="tkcontainer clmcenter">
      <div class="tk_container clmcenter">
        <div class="qrcodeinfo clmcenter">
          <div class="qrcodeimg clmcenter" ref="qrcodeimg"></div>
          <p class="qrcodetips">凭此码前往对应门店领取</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2-fix";
export default {
  props: {
    qrcode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      qrcodeText: "",
    };
  },
  methods: {
    makeQrcode() {
      new QRCode(this.$refs.qrcodeimg, {
        text: this.qrcodeText,
        width: 240,
        height: 240,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  watch: {
    qrcode: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.qrcodeText = newVal;
          this.makeQrcode();
        }
      },
      immediate: true, // 是否在监听开始时立即调用
    },
  },
};
</script>
<style lang="less" scoped>
// 核销二维码
.qrcodebox {
  .tkcontainer {
    .tk_container {
      height: 519px;
      background: url("@/assets/img/tk_bg.png") no-repeat center;
      background-size: 100% 100%;
      .qrcodeinfo {
        .qrcodeimg {
          width: 270px;
          height: 270px;
          border: 7px solid #d9d9d9;
          box-sizing: border-box;
          overflow: hidden;
        }
        .qrcodetips {
          padding-top: 1rem;
          font-size: 1.8rem;
          color: #000000;
          text-align: center;
        }
      }
    }
  }
}
</style>
